<template>
  <view class="add-family-container">
    <!-- Main Content -->
    <view class="content">
      <!-- Illustration Section -->
      <view class="illustration-section">
        <image class="illustration" src="https://www.ruilongan.com/profile/upload/2025/07/01/family_20250701145858A069.png" mode="aspectFit" />
      </view>
      
      <!-- QR Code Section -->
      <view class="qr-section">
        <text class="qr-title">微信扫描二维码自动绑定</text>
        <image class="qr-code" src="https://www.ruilongan.com/profile/upload/2025/07/01/qrcode_20250701150511A070.png" mode="aspectFit" />
        <button class="share-btn" @tap="handleShare">分享给家人</button>
        
        <!-- Tips Section -->
        <view class="tips-section">
          <text class="tip-warning">"温馨提示：您的亲情码如同家门钥匙！"</text>
          <view class="tip-item">
            <text class="check-icon">✅</text>
            <text>建议面对面扫码绑定</text>
          </view>
          <view class="tip-item">
            <text class="cross-icon">⛔</text>
            <text>切勿截图发微信群/朋友圈</text>
          </view>
          <text class="tip-security">防止健康数据泄露给陌生人！</text>
        </view>
      </view>

      <!-- Bound Family Section -->
      <view class="bound-family">
        <text class="section-title">已绑定家人</text>
        <view class="empty-state">
          <image class="empty-icon" src="https://www.ruilongan.com/profile/upload/2025/07/01/wu_20250701151736A071.png" mode="aspectFit" />
          <text class="empty-text">已绑定家人在此展示</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AddFamily',
  methods: {
    handleShare() {
      // Implement share functionality
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.add-family-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #F8C293, #FFFFFF);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 44px 16px 10px;
  background-color: #fff;
}

.title {
  font-size: 18px;
  font-weight: 500;
}

.content {
  /* padding: 20px; */
}

.illustration-section {
  position: relative;
  margin-bottom: 15px;
  width: 100vw;
}

.illustration {
  width: 100vw;
  height: 300px;
  display: block;
  object-fit: cover;
}

.qr-section {
  background-color: #fff;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  margin:10px;
}

.qr-title {
  text-align: center;
  font-size: 18px;
  color: #000000;
  margin-bottom: 10px;
  width: 100%;
  display: block;
}

.qr-code {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
}

.share-btn {
  background-color: #FFD678;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 2px;
  width: 80%;
  margin: 20px auto;
  font-size: 18px;
}

.tips-section {
  margin-top: 20px;
  padding: 15px;
  border-top: 1px dashed #616160;
  text-align: center;
  color: #FFA31A;
  margin: 0 20px;
}

.tip-warning {
  color: #FFA31A;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}

.tip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
  font-size: 14px;
  color: #FFA31A;
}

.check-icon {
  color: #FFA31A;
  margin-right: 8px;
}

.cross-icon {
  color: #FFA31A;
  margin-right: 8px;
}

.tip-security {
  color: #FFA31A;
  font-size: 14px;
  margin-top: 10px;
}

.bound-family {
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  margin: 10px;
}

.section-title {
  font-size: 18px;
  color: #000000;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  display: block;
}

.empty-state {
  text-align: center;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  width: 160px;
  height: 160px;
  margin-bottom: 10px;
}

.empty-text {
  color: #999;
  font-size: 14px;
  text-align: center;
}
</style>